<template>
  <div class="container">
    <el-card>
      <el-row>
        <el-col :span="24" style="text-align: right">
          <div>
            <el-button type="success" icon="el-icon-edit" size="small" @click="addMenu"
              >添加菜单</el-button
            >
          </div>
        </el-col>
      </el-row>
      <el-table
        :data="tableData"
        row-key="id"
        style="margin-top: 20px"
      >
        <el-table-column prop="title" label="标题" width="200">
        </el-table-column>
        <el-table-column prop="code" label="权限点代码"> </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              plain
              circle
              @click="edit(row.id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              plain
              circle
              @click="remove(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <treeTable :data="tableData" :treeStructure="treeStructure"/> -->
    </el-card>
    <MenusAdd @updateMenus="renderList" ref="MenusAdd" :addVisible.sync="addVisible"/>
  </div>
</template>

<script>
import { list, remove } from '@/api/base/menus'
// import treeTable from '@/components/TreeTable'
import MenusAdd from '../components/menus-add.vue'
export default {
  components: { MenusAdd },
  data () {
    return {
      tableData: [],
      disabelData: [],
      treeStructure: true,
      addVisible: false
    }
  },

  created () {
    this.renderList()
  },

  methods: {
    edit (id) {
      this.$refs.MenusAdd.datas = this.tableData
      this.$refs.MenusAdd.disabelData = this.disabelData
      this.addVisible = true
      this.$refs.MenusAdd.detailId = id
    },
    async remove (id) {
      try {
        await this.$confirm('确定删除吗', '提示')
        await remove({ id })
        this.$message.success('删除成功')
        this.renderList()
      } catch (e) {
        console.log(e)
      }
    },
    async renderList () {
      // 最笨的屎山代码
      const { data } = await list()
      this.tableData = data.map(item => {
        if (item.childs && item.childs.length > 0) {
          return {
            title: item.title,
            pid: item.pid,
            id: item.id,
            code: item.code,
            children: item.childs.map(e => {
              if (e.points && e.points.length > 0) {
                return {
                  title: e.title,
                  pid: e.pid,
                  id: e.id,
                  code: e.code,
                  children: e.points.map(val => {
                    return {
                      title: val.title,
                      pid: val.pid,
                      id: val.id,
                      code: val.code,
                      is_point: val.is_point
                    }
                  })
                }
              } else {
                return {
                  title: e.title,
                  pid: e.pid,
                  id: e.id,
                  code: e.code
                }
              }
            })
          }
        } else {
          return {
            title: item.title,
            pid: item.pid,
            id: item.id,
            code: item.code
          }
        }
      })
      this.disabelData = data.map(item => {
        if (item.childs && item.childs.length > 0) {
          return {
            title: item.title,
            pid: item.pid,
            id: item.id,
            code: item.code,
            children: item.childs.map(e => {
              if (e.points && e.points.length > 0) {
                return {
                  title: e.title,
                  pid: e.pid,
                  id: e.id,
                  code: e.code,
                  disabled: true,
                  children: e.points.map(val => {
                    return {
                      title: val.title,
                      pid: val.pid,
                      id: val.id,
                      code: val.code,
                      is_point: val.is_point
                    }
                  })
                }
              } else {
                return {
                  title: e.title,
                  pid: e.pid,
                  id: e.id,
                  code: e.code,
                  disabled: true
                }
              }
            })
          }
        } else {
          return {
            title: item.title,
            pid: item.pid,
            id: item.id,
            code: item.code
          }
        }
      })
    },
    addMenu () {
      this.addVisible = true
      this.$refs.MenusAdd.datas = this.tableData
      this.$refs.MenusAdd.disabelData = this.disabelData
    }
  }
}
</script>

<style scoped lang='less'>
  .container {
    margin: 10px 0;
    padding: 0 10px;
  }
</style>
